import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
//引入公共样式
import "@/assets/css/common.css";
import "@/assets/font/iconfont";
import "@/assets/font/iconfont.css";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import qfSubMenu from "qf-sub-menu" //引入我们的组件
import "@/assets/css/el-reset.css"
Vue.use(qfSubMenu)
//引入进度条
// import nprogress from "nprogress"
//引入进度条css文件
// import "nprogess/npogress.css"


//import * as permissApi from "@/api/permission"
// permissApi.getMenuList().then(res=>{
//   console.log(res);
// })


//路由守卫
router.beforeEach((to, from, next) => {
  // nprogress.start()
  //console.log("to",to);
  //console.log("from",from);
  //console.log("next",next);   //没有调用这个函数的话，页面是空白
  //1.判断本地存储里有没有token，如果有就放行，没有就重新跳转到登录页
  let token = localStorage.getItem("myx-token")
  if (token) {
    if (store.state.userMenu.length === 0) {
      //说明用户的路由信息(菜单信息)没有了，需要重新发起请求
      store.dispatch("FETCH_MENULIST")
        .then(() => {
          //重新激活动态添加的路由，replace:true 是为了不产生历史记录
          next({ ...to, replace: true })
          //console.log(router.getRoutes())
        })
    } else {
      next()
    }
  } else {
    //2.用户没登录，不能访问其他页面
    //如果用户访问的路径是login,那么需要放行
    if (to.path === "/login") {
      //刷新页面,刷新页面的目的是为了去掉动态添加的路由
      next()
    } else {
      //如果不是login就拦截,并且跳转到login页
      next({ path: "/login" })
    }
  }
})

//全局路由后置钩子
router.afterEach((to, from) => {
  //console.log(to);
  //console.log(from);
  //浅拷贝  深拷贝 lodash=>deepclone() JSON.stringify() JSON,parse()
  let matched = [...to.matched]   //浅拷贝一个新的数组
  matched.splice(0, 1)
  //console.log(matched);
  //调用commit触发mutations更改vuex中存储的breadCrumb
  store.commit("SET_BREADCRUMB", matched)
})

// Vue.config.productionTip = false;
Vue.use(ElementUI);

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
